<template>
	<view class="page-content">
		<u-navbar :is-back="true" title="规模与质量" title-color="#000" :border-bottom="true">
		</u-navbar>
		<view class="bg">
			<view class="title"></view>
		</view>
		<view class="internet-user">
			<view class="main">
				<view class="main-tilte">
					<img src="@/static/images/pic_detail_tousu1.png" class="total-img" alt="">
					<view class="count">
						<view class="test">手机用户</view>
						<view class="number">{{dataDatals.MobileTotal}}</view>
						<view class="test">万户</view>
					</view>
				</view>
				<view class="main-4g">
					<view class="main-4g-title">
						<view class="title-font">4G用户</view>
					</view>
					<view class="main-4g-user">
						<view class="user-left">当前4G用户数：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.User4G}}</view>
							<view class="font1">万户</view>
						</view>
					</view>
					<view style="width:700rpx; height:400rpx; margin-top: 47rpx;">
						<l-echart ref="echartRef1" style="width:700rpx; height:400rpx"></l-echart>
					</view>
					<view class="pic_fenge"></view>
					<!-- 5g用户 -->
					<view class="main-4g-title">
						<view class="title-font">5G用户</view>
					</view>
					<view class="main-4g-user">
						<view class="user-left">当前5G用户：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.User5G}}</view>
							<view class="font1">万户</view>
						</view>
					</view>
					<view style="width:700rpx; height:400rpx; margin-top: 47rpx;">
						<l-echart ref="echartRef2" style="width:700rpx; height:400rpx"></l-echart>
					</view>
				<!-- 	<view class="pic_fenge"></view>
					<view class="main-4g-title">
						<view class="title-font">VOLTE用户数</view>
					</view>
					<view class="main-4g-user">
						<view class="user-left">当前VOLTE用户数：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.UserVolte}}</view>
							<view class="font1">万户</view>
						</view>
					</view>
					<view style="width:700rpx; height:400rpx; margin-top: 47rpx;">
						<l-echart ref="echartRef3" style="width:700rpx; height:400rpx"></l-echart>
					</view> -->
					<view class="pic_fenge"></view>
					<view class="main-4g-title">
						<view class="title-font">家宽活跃用户数</view>
					</view>
					<view class="main-4g-user">
						<view class="user-left">当前家宽活跃用户数：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.UserJk}}</view>
							<view class="font1">万户</view>
						</view>
					</view>
					<view style="width:700rpx; height:400rpx; margin-top: 47rpx;">
						<l-echart ref="echartRef4" style="width:700rpx; height:400rpx"></l-echart>
					</view>
					<view class="pic_fenge"></view>
					<view class="main-4g-title">
						<view class="title-font">和TV播放用户数</view>
					</view>
					<view class="main-4g-user">
						<view class="user-left">当前和TV播放用户数：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.UserTv}}</view>
							<view class="font1">万户</view>
						</view>
					</view>
					<view style="width:700rpx; height:400rpx; margin-top: 47rpx;">
						<l-echart ref="echartRef5" style="width:700rpx; height:400rpx"></l-echart>
					</view>
				</view>
			</view>
			<!-- 业务规模 -->
			<view class="business">
				<view class="business-title"></view>
				<view class="business-main">
					<view class="main-count">
						<view class="item" style="margin-bottom: 35rpx;">
							<view class="user-left">话务量：</view>
							<view class="user-right">
								<view class="font">{{dataDatals.TrafficVolume}}</view>
								<view class="font1">万ERL</view>
							</view>
						</view>
						<view class="item" style="margin-bottom: 35rpx;">
							<view class="user-left">家宽流量：</view>
							<view class="user-right">
								<view class="font">{{dataDatals.FlowJk}}</view>
								<view class="font1">TB</view>
							</view>
						</view>
						<view class="item">
							<view class="user-left">4G流量：</view>
							<view class="user-right">
								<view class="font">{{dataDatals.Flow4G}}</view>
								<view class="font1">TB</view>
							</view>
						</view>
						<view class="item">
							<view class="user-left">5G流量：</view>
							<view class="user-right">
								<view class="font">{{dataDatals.Flow5G}}</view>
								<view class="font1">TB</view>
							</view>
						</view>
					</view>
					<!-- 地图 -->
					<view style="width:710rpx; height:500rpx;">
						<l-echart ref="echartsmap"></l-echart>
					</view>
					<view class="pic_fenge"></view>
					<!-- 政企专线条数： -->
					<view class="main-zx-user">
						<view class="user-left">政企专线条数：</view>
						<view class="user-right">
							<view class="font">{{dataDatals.GovNum}}</view>
							<view class="font1">条</view>
						</view>
					</view>
					<!-- 柱状图 -->
					<view style="width:710rpx; height:300rpx">
						<l-echart ref="chartRef2" style="width:710rpx; height:300rpx"></l-echart>
					</view>
				</view>
			</view>
			<!-- 网络质量 -->
			<view class="network">
				<view class="network-title"></view>
				<view class="network-main">
					<view class="main-title">
						<view class="title-font">无线网</view>
					</view>
					<!-- 环形图 -->
					<view class="circular">
						<view class="circular-item" style="margin-right: 10rpx;">
							<l-echart ref="chartRef3"></l-echart>
						</view>
						<view class="circular-item" style="margin-left: 10rpx;">
							<l-echart ref="chartRef4"></l-echart>
						</view>
					</view>
					<!-- 柱状图 + 折线图 -->
					<view style="width:710rpx; height:460rpx">
						<l-echart ref="chartRef5" style="width:710rpx; height:500rpx"></l-echart>
					</view>
					<view class="pic_fenge"></view>
					<view class="main-title">
						<view class="title-font title_gmyzl2">互联网</view>
					</view>
					<!-- 网间电信 -->
					<view class="telecom" style="margin-bottom: 10rpx;">
						<view class="telecom-count">
							<view class="count-top">
								<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
								网间电信
							</view>
							<view class="telecom-count-main">
								<view class="main-item" style="border-right: 1px dotted  #C4C4C4;">
									<view class="font1">峰值流量</view>
									<view class="font2">{{getnetworkDatails.InterNetworkDx}}<span>Gbps</span></view>
								</view>
								<view class="main-item">
									<view class="font1">峰值利用率</view>
									<view class="font2">{{getnetworkDatails.InterNetdxRate}}<span>%</span></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 网间联通 -->
					<view class="telecom">
						<view class="telecom-count">
							<view class="count-top">
								<u-icon name="play-right-fill" color="#5F6475" size="28"></u-icon>
								网间联通
							</view>
							<view class="telecom-count-main">
								<view class="main-item" style="border-right: 1px dotted  #C4C4C4;">
									<view class="font1">峰值流量</view>
									<view class="font2">{{getnetworkDatails.InterNetworkLt}}<span>Gbps</span></view>
								</view>
								<view class="main-item">
									<view class="font1">峰值利用率</view>
									<view class="font2">{{getnetworkDatails.InterNetltRate}}<span>%</span></view>
								</view>
							</view>
						</view>
					</view>
					<!-- 负荷 -->
					<view class="load">
						<view class="load-main">
							<view class="load-main-top">
								<view class="load-main-top-item" style="margin-right: 17rpx;">
									<view class="font1">CDN平均负荷</view>
									<view class="font2">{{getnetworkDatails.AvgCDN}}<span>%</span></view>
								</view>
								<view class="load-main-top-item" style="margin-left: 17rpx;">
									<view class="font1">CDN峰值负荷</view>
									<view class="font2">{{getnetworkDatails.MaxCDN}}<span>%</span></view>
								</view>
							</view>
							<view class="load-main-top load-main-bottom">
								<view class="load-main-top-item" style="margin-right: 17rpx;">
									<view class="font1">电视播放成功率</view>
									<view class="font2">{{getnetworkDatails.SuccessTv}}<span>%</span></view>
								</view>
								<view class="load-main-top-item" style="margin-left: 17rpx;">
									<view class="font1">电视卡顿时长占比</view>
									<view class="font2">{{getnetworkDatails.LagTv}}<span>%</span></view>
								</view>
							</view>
						</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	const jsonData = require('static/map/hubei.json');
	export default {
		watch: {
		    // 监听路由变化
		    '$route'(to, from) {
		      if (to.path === '/pagesJK/scaleAndQuality/index') {
		        	this.initPage()
		      }    
		    }
		},
		data() {
			
			return {
				dataDatals: {},
				getnetworkDatails: {},
				ZQZXDataName: [], // 政企业专业条数 城市地名
				ZQZXData: [], // 政企业专业条数 数量
				buscityData: [], // 地图数据 
				fourAverageName: [], // 5g分流比 - 地市名称
				fourAverage: [], // 5g分流比
				fourAverage2: [], // 5g低速率用户占比
				InfoLis:{},
				option: {
					tooltip: {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
					},
					grid: {
						left: '50rpx',
						top: '10px',
						bottom:'100rpx'
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							rotate: 45,
							fontSize: 10,
							color: '#707070', // 
						},
						axisTick: {
							show: false,
							color: '#707070', // 
						},
						scrollbar: {
							show: true
						},
						axisLine: {
							lineStyle: {
								type: 'dashed',
								color: '#CCCCCC',
							},
						},

					},
					legend: [{
						data: ['用户数','同比', '环比'],
						bottom: '5',
						// left: '30%',
						textStyle: {
							color: '#A7ABBB', // 默认文本颜色
							height: 8,
							rich: {
								a: {
									verticalAlign: 'middle'
								}
							}
						},
						itemWidth: 10, // 设置图例项的宽度
						itemHeight: 10
					}],
					yAxis: [
						{
							type: 'value',
							axisLabel: {
								fontSize: 10,
								color: '#707070', // 
							},
						},
						{
						type: 'value',
						axisLabel: {
							fontSize: 10,
							color: '#707070', // 
							formatter: '{value}%'
						},
						axisLine: { show: false ,// 隐藏第二条y轴的轴线 
						}, 
						axisTick: { show: false ,// 隐藏第二条y轴的刻度线 
						},
						splitLine: { show: false ,// 隐藏第二条y轴的分割线 
						}
					}],
					series: [
						{
							name: '用户数',
							type: 'line',
							data: [],
							symbol: "none", //不显示拐点
							color: '#16CBAC',
						},
						{
							name: '同比',
							type: 'line',
							data: [],
							symbol: "none", //不显示拐点
							color: '#F37A00'
						},
						{
							name: '环比',
							type: 'line',
							data: [],
							symbol: "none", //不显示拐点
							color: '#1b9cff'
						}
						
					]
				},
				
			}
		},
		mounted() {
			this.initPage()
		},
		methods: {
			initPage(){
				this.getnetworkData()
				this.getData()
				this.getbuscityData()
				this.getwxcityData()
				this.getindexInfo()
			},
			// 4g/5g/VOLTE用户数/家宽活跃用户数/和TV播放用户数 数据
			async getindexInfo(){
				let data = await this.$api.getindexInfo(); 
				if (data.Code == 200) {
					this.InfoLis = data.Data
					this.init()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			
			//查询无线网地市数据
			async getwxcityData() {
				let data = await this.$api.getwxcityDataZB(); // 概览 - 指标
				// console.log('概览 - 网络质量',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.City)
						arr2.push(item.DiversionRatio)
						arr3.push(item.DslRate)
					})
					this.arr = arr
					this.arr2 = arr2
					this.fourAverageName = arr
					this.fourAverage = arr2
					this.fourAverage2 = arr3
					this.init4()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//地图数据
			async getbuscityData() {
				let data = await this.$api.getbuscityData();
				// console.log('指标 - 政企res',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					data.Data.forEach(item => {
						arr.push(item.City)
						arr2.push(item.GovNum)
					})
					this.ZQZXDataName = arr
					this.ZQZXData = arr2
					this.buscityData = data.Data
					this.mYChartmap()
					this.init2()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//查询用户规模等数据
			async getData() {
				let data = await this.$api.getDataGKZB();
				if (data.Code == 200) {
					this.dataDatals = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//idc数据
			async getnetworkData() {
				let data = await this.$api.getnetworkDataGKZB(); // 概览 - 指标
				if (data.Code == 200) {
					this.getnetworkDatails = data.Data
					this.init3()
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 用户数五个折线图
			async init() {
				let { List4G , List5G ,ListJK,ListTV,ListVolte } = this.InfoLis
				let startValue =  List4G.length - 1 
				let endValue =  List4G.length-11
				this.option.dataZoom =  [{
							// 设置滚动条的隐藏与显示
							show: 'scoreShow',
							// 设置滚动条类型
							type: "slider",
							// 设置背景颜色
							// showDataShadow: false, //false去除滚轮中间那条线
							backgroundColor: "#F0EFF5",
							borderRadius:10,
							// 设置选中范围的填充颜色
							fillerColor: "#D2D1D7",
							// 设置边框颜色
							borderColor: "#F0EFF5",
							// 是否显示detail，即拖拽时候显示详细数值信息
							// showDetail: false,
							// 数据窗口范围的起始数值
							startValue: startValue,
							// 数据窗口范围的结束数值（一页显示多少条数据）
							endValue:endValue,
							// empty：当前数据窗口外的数据，被设置为空。
							// 即不会影响其他轴的数据范围
							filterMode: "empty",
							// 设置滚动条宽度，相对于盒子宽度
							width: "80%",
							// 设置滚动条高度
							height: 10,
							// 设置滚动条显示位置
							left: "center",
							brushSelect: false, // 关闭滚动条缩放 **
							// 是否锁定选择区域（或叫做数据窗口）的大小
							zoomLoxk: true,
							// 控制手柄的尺寸
							handleSize: '0',
							// dataZoom-slider组件离容器下侧的距离
							bottom: 35,
							disabled: true,
							moveHandleSize: 0, // 滑块高度
						},
						{
							// 没有下面这块的话，只能拖动滚动条，
							// 鼠标滚轮在区域内不能控制外部滚动条
							type: "inside",
							// 滚轮是否触发缩放
							zoomOnMouseWheel: false,
							// 鼠标滚轮触发滚动
							moveOnMouseMove: true,
							moveOnMouseWheel: true,
						},
					]
				// 4g用户
				let option1 = JSON.parse(JSON.stringify(this.option))
				option1.tooltip = {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
							 	'4G用户- ' + params[0].name,
								
								`用户数: ${List4G.map(item=>item.UserNum)[dataIndex]} 万户`,
								`同比: ${List4G.map(item=>item.TbRate)[dataIndex]} %`,
								`环比: ${List4G.map(item=>item.HbRate)[dataIndex]} %`
							].join('\n');
						}
				},
				option1.xAxis.data = List4G.map(item=>item.Date),
				option1.series = [
					{
						name: '用户数',
						type: 'line',
						data: List4G.map(item=>item.UserNum),
						symbol: "none", //不显示拐点
						color: '#16CBAC',
						yAxisIndex: 0,
					},
					{
						name: '同比',
						type: 'line',
						data: List4G.map(item=>item.TbRate),
						symbol: "none", //不显示拐点
						color: '#F37A00',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					{
						name: '环比',
						type: 'line',
						data: List4G.map(item=>item.HbRate),
						symbol: "none", //不显示拐点
						color: '#1b9cff',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					}
					
					
				]
				const chart1 = await this.$refs.echartRef1.init(echarts)
				chart1.setOption(option1);
				// 5g用户
				let option2 = JSON.parse(JSON.stringify(this.option))
				option2.tooltip = {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
							 	'5G用户- ' + params[0].name,
								`用户数: ${List5G.map(item=>item.UserNum)[dataIndex]} 万户`,
								`同比: ${List5G.map(item=>item.TbRate)[dataIndex]} %`,
								`环比: ${List5G.map(item=>item.HbRate)[dataIndex]} %`,
							].join('\n');
						}
				},
				option2.xAxis.data = List5G.map(item=>item.Date),
				option2.series = [
					{
						name: '用户数',
						type: 'line',
						data: List5G.map(item=>item.UserNum),
						symbol: "none", //不显示拐点
						color: '#16CBAC',
						yAxisIndex: 0,
					},
					{
						name: '同比',
						type: 'line',
						data: List5G.map(item=>item.TbRate),
						symbol: "none", //不显示拐点
						color: '#F37A00',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					{
						name: '环比',
						type: 'line',
						data: List5G.map(item=>item.HbRate),
						symbol: "none", //不显示拐点
						color: '#1b9cff',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					
				]
				const chart2 = await this.$refs.echartRef2.init(echarts)
				chart2.setOption(option2);
				// VOLTE用户数
				// let option3 = JSON.parse(JSON.stringify(this.option))
				// option3.tooltip = {
				// 		trigger: 'axis',
				// 		confine: true,
				// 		textStyle: {
				// 			color: '#FFFFFF' // 字体颜色改为白色
				// 		},
				// 		backgroundColor: '#656565', // 背景颜色改为黑色
				// 		borderColor: '#656565',
				// 		formatter: params => {
				// 			const dataIndex = params[0].dataIndex
				// 			return [
				// 			 	'VOLTE用户- ' + params[0].name,
				// 				`环比: ${ListVolte.map(item=>item.HbRate)[dataIndex]} %`,
				// 				`同比: ${ListVolte.map(item=>item.TbRate)[dataIndex]} %`,
				// 				`用户数: ${ListVolte.map(item=>item.UserNum)[dataIndex]} 万户`,
				// 			].join('\n');
				// 		}
				// },
				// option3.xAxis.data = ListVolte.map(item=>item.Date),
				// option3.series = [{
				// 		name: '环比',
				// 		type: 'line',
				// 		data: ListVolte.map(item=>item.HbRate),
				// 		symbol: "none", //不显示拐点
				// 		color: '#1b9cff'
				// 	},
				// 	{
				// 		name: '同比',
				// 		type: 'line',
				// 		data: ListVolte.map(item=>item.TbRate),
				// 		symbol: "none", //不显示拐点
				// 		color: '#F37A00'
				// 	},
				// 	{
				// 		name: '用户数',
				// 		type: 'line',
				// 		data: ListVolte.map(item=>item.UserNum),
				// 		symbol: "none", //不显示拐点
				// 		color: '#16CBAC',
				// 		yAxisIndex: 1,
				// 	}
				// ]
				// const chart3 = await this.$refs.echartRef3.init(echarts)
				// chart3.setOption(option3);
				// 家宽活跃用户数
				let option4 = JSON.parse(JSON.stringify(this.option))
				option4.tooltip = {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
							 	'家宽活跃用户- ' + params[0].name,
								`用户数: ${ListJK.map(item=>item.UserNum)[dataIndex]} 万户`,
								`同比: ${ListJK.map(item=>item.TbRate)[dataIndex]} %`,
								`环比: ${ListJK.map(item=>item.HbRate)[dataIndex]} %`,
							].join('\n');
						}
				},
				option4.xAxis.data = ListJK.map(item=>item.Date),
				option4.series = [
					{
						name: '用户数',
						type: 'line',
						data: ListJK.map(item=>item.UserNum),
						symbol: "none", //不显示拐点
						color: '#16CBAC',
						yAxisIndex: 0,
					},
					{
						name: '同比',
						type: 'line',
						data: ListJK.map(item=>item.TbRate),
						symbol: "none", //不显示拐点
						color: '#F37A00',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					{
						name: '环比',
						type: 'line',
						data: ListJK.map(item=>item.HbRate),
						symbol: "none", //不显示拐点
						color: '#1b9cff',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					
				]
				const chart4 = await this.$refs.echartRef4.init(echarts)
				chart4.setOption(option4);
				// 和TV播放用户数
				let option5 = JSON.parse(JSON.stringify(this.option))
				option5.tooltip = {
						trigger: 'axis',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							const dataIndex = params[0].dataIndex
							return [
							 	'和TV播放用户- ' + params[0].name,
								`用户数: ${ListTV.map(item=>item.UserNum)[dataIndex]} 万户`,
								`同比: ${ListTV.map(item=>item.TbRate)[dataIndex]} %`,
								`环比: ${ListTV.map(item=>item.HbRate)[dataIndex]} %`,
							].join('\n');
						}
				},
				option5.xAxis.data = ListTV.map(item=>item.Date),
				option5.series = [
					{
						name: '用户数',
						type: 'line',
						data: ListTV.map(item=>item.UserNum),
						symbol: "none", //不显示拐点
						color: '#16CBAC',
						yAxisIndex: 0,
					},
					{
						name: '同比',
						type: 'line',
						data: ListTV.map(item=>item.TbRate),
						symbol: "none", //不显示拐点
						color: '#F37A00',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					},
					{
						name: '环比',
						type: 'line',
						data: ListTV.map(item=>item.HbRate),
						symbol: "none", //不显示拐点
						color: '#1b9cff',
						yAxisIndex: 1, // 绑定到百分比 Y 轴
					}
				]
				const chart5 = await this.$refs.echartRef5.init(echarts)
				chart5.setOption(option5);
			},
			// 地图
			async mYChartmap() {
				let option2 = {
					tooltip: {
						trigger: 'item',
						textStyle: {
							width: 260,
							height: 233,
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						confine: true,
						formatter: params => {
							const {
								name
							} = params;
							const filteredItems = this.buscityData.filter(item => item.City === name);
							const {
								TrafficTotal = 0, Traffic4G = 0, Traffic5G = 0, TrafficJk = 0
							} = filteredItems.length > 0 ? filteredItems[0] : {};
							return [
								name,
								`话务量: ${TrafficTotal} 万ERL`,
								`4G流量: ${Traffic4G} TB`,
								`5G流量: ${Traffic5G} TB`,
								`家宽流量: ${TrafficJk} TB`,
							].join('\n');
						}
					},
					series: [{
						name: '数据',
						type: 'map',
						map: '湖北',
						zoom: 1.2, // 设置初始缩放级别为1.2倍
						scaleLimit: {
							min: 0.5, // 最小缩放比例
							max: 2 // 最大缩放比例
						},
						selectedMode: false,
						itemStyle: {
							normal: {
								opacity: 0.8,
								borderWidth: 1,
								areaColor: '#1B9CFF',
								borderColor: '#fff',

								label: {
									show: true, //显示标签
									position: 'outside', //标签位置在区域内部
									textStyle: {
										color: '#000'
									},
								},
								emphasis: {
									areaColor: '#5095B3',
									borderColor: '#fff',
									opacity: 1,
									label: {
										show: true, //高亮显示标签
										position: 'inside', //高亮时标签位置也在区域内部
										textStyle: {
											color: '#fff'
										},
									}
								}
							},
							data: [

							],

						}
					}]
				}
				const chart2 = await this.$refs.echartsmap.init(echarts);
				echarts.registerMap('湖北', jsonData)
				chart2.setOption(option2)
			},
			// 政企专线条数柱状图
			async init2() {
				let option = {
					grid: {
						top: '10rpx',
						bottom: '30rpx',
						left: '60rpx'
					},
					tooltip: {
						trigger: 'item',
						confine: true,
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'政企专线条数： ' +
								this.ZQZXData[params.dataIndex] +
								'条'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#5C5C5C', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.ZQZXDataName,
						axisLabel: {
							interval: 0,
							formatter: function(value) {
								return value.split('').join('\n')
							}
							// rotate: -90, // 文字竖直展示
							// fontSize: 10,
							// color: '#5C5C5C'
						}
					},
					yAxis: [{
						axisLabel: {
							color: '#A7ABBB', // 设置标签颜色
						},
						type: 'value',
					}],
					series: [{
						data: this.ZQZXData,
						type: 'bar',
						name: '政企专线条数',
						itemStyle: {
							color: '#1B9CFF',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5,
						// label: {
						//    show: true,
						// color:'#333333',
						//  fontSize: 10, // 设置字体大小
						//    position: 'top',
						//    formatter: function (params) {
						//      return `${params.value}%`
						//    }
						//  }
					}]
				};
				const chart1 = await this.$refs.chartRef2.init(echarts)
				chart1.setOption(option);
			},
			// 两个环形图
			async init3() {
				let option = {
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['55%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								position: 'center',
								color: '#4c4a4a',
								formatter: `{total|${this.getnetworkDatails.DiversionRatio}%}\n{active|5G分流比}`,
								rich: {
									total: {
										fontSize: 15,
										fontFamily: "微软雅黑",
										color: '#000000'
									},
									active: {
										fontFamily: "微软雅黑",
										fontSize: 12,
										color: '#A7ABBB',
										lineHeight: 15,
										padding:[10,0,0,0]
									},
								}
							},
							emphasis: {
								show: true,
							}
						},
						emphasis: {
							label: {
								show: false,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						data: [
							{
								value: this.getnetworkDatails.DiversionRatio,
								name: 'Direct',
								itemStyle: {
									color: '#0CB480'
								}
							},
							{
									value: 100 - this.getnetworkDatails.DiversionRatio,
									name: 'Search Engine',
									itemStyle: {
										color: '#DDE9E4'
									}
								},
						]
					}]
				};
				const chart1 = await this.$refs.chartRef3.init(echarts)
				chart1.setOption(option);
				let option1 = {
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['55%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								position: 'center',
								color: '#4c4a4a',
								formatter: '{total|' + this.getnetworkDatails.DslRate + ' %' + '}' + '\n\r' +
									'{active|5G低速率' + '\n\r' + '用户占比}',
								rich: {
									total: {
										fontSize: 15,
										fontFamily: "微软雅黑",
										color: '#000000'
									},
									active: {
										fontFamily: "微软雅黑",
										fontSize: 12,
										color: '#A7ABBB',
										lineHeight: 15,
										padding:[10,0,0,0]
									},
								}
							},
							emphasis: { //中间文字显示
								show: true,
							}
						},
						emphasis: {
							label: {
								show: false,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						data: [
							{
								value: this.getnetworkDatails.DslRate,
								name: 'Direct',
								itemStyle: {
									color: '#B49413'
								}
							},
							{
									value: 100 - this.getnetworkDatails.DslRate,
									name: 'Search Engine',
									itemStyle: {
										color: '#DDE9E4'
									}
								},
						]
					}]
				};
				const chart2 = await this.$refs.chartRef4.init(echarts)
				chart2.setOption(option1);
			},
			// 渲染柱状图/折线图 5G分流比/ 5G低速率用户占比
			async init4() {
				// 5G分流比
				let option = {
					grid: {
						left: '50rpx',
						right: '50rpx',

						top: '30rpx',
						buttom: '10rpx',

					},
					tooltip: {
						trigger: 'item',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565',
						formatter: params => {
							return (
								params.name +
								'\n' +
								'5G分流比： ' +
								this.fourAverage[params.dataIndex] +
								'%' +
								'\n' +
								'5G低速率用户占比： ' +
								this.fourAverage2[params.dataIndex] +
								'%'
							)
						}
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: this.fourAverageName,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							interval: 0,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							max: 100, //最大百分比
							interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: this.fourAverage,
						type: 'bar',
						name: '5G分流比',
						yAxisIndex: 0,
						itemStyle: {
							color: '#0CB480',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}, {
						data: this.fourAverage2,
						name: '5G低速率用户占比',
						yAxisIndex: 1,
						type: 'line',
						symbol: "none", //不显示拐点
						itemStyle: {
							color: '#B49413'
						},
						smooth: true
					}]
				}
				const chart1 = await this.$refs.chartRef5.init(echarts)
				chart1.setOption(option)
			},
		}
	}
</script>


<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 370rpx;
		background-color: #fff;
		background: url(@/static/images/banner_zhiliangyuguimo.png) no-repeat center;
		background-size: contain;
		position: relative;

		.title {
			width: 327rpx;
			height: 110rpx;
			background: url(@/static/images/pic_title_gmyzl1.png) no-repeat center;
			background-size: contain;
			position: absolute;
			left: 20rpx;
			bottom: 70rpx;
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 700;
			padding: 21rpx 0 0 85rpx;
		}
	}

	.internet-user {
		width: 100%;
		padding: 30rpx 20rpx 20rpx 20rpx;
		background-color: #cce7ff;
		position: relative;

		.main {
			width: 100%;
			// height: 592rpx;
			// background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: -120rpx;
			padding-bottom: 10rpx;
			overflow: hidden; // 

			.main-tilte {
				width: 100%;
				height: 135rpx;
				background: url(@/static/images/pic_detail_guzhang_bg3.png) no-repeat center;
				background-size: 100% 135rpx;
				display: flex;
				align-items: center;

				.total-img {
					width: 138rpx;
					height: 138rpx;
					margin: 20rpx 0 0 50rpx;
				}

				.count {
					display: flex;
					align-items: center;
					margin-left: 15rpx;

					.test {
						font-size: 28rpx;
						color: #FFFFFF;
						margin-right: 14rpx;
						font-weight: 400;
					}

					.number {
						font-weight: bold;
						font-size: 42rpx;
						color: #FFFFFF;
						margin-right: 10rpx;
						text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.5);
					}
				}
			}

			.main-4g {
				background: #fff;
				border-radius: 16rpx;
				margin-top: -10rpx;
                padding-bottom: 30rpx;
				.main-4g-title {
					padding: 40rpx 58rpx 0 58rpx;

					.title-font {
						padding-left: 50rpx;
						height: 40rpx;
						background: url(@/static/images/title_gmyzl1.png) no-repeat center;
						background-size: 100%;
						color: #1B9CFF;
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.main-4g-user {
					margin-top: 24rpx;
					width: 100%;
					border-radius: 16rpx;
					height: 66rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.user-left {
						// margin-left: 182rpx;
					}

					.user-right {
						min-width: 136rpx;
						// height: 66rpx;
						padding: 20rpx 34rpx;
						background: url(@/static/images/numbg.png) no-repeat center;
						background-size: 100% 100%;
						color: #000;
						font-size: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;

						.font1 {
							margin-left: 9rpx;
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}
			}
		}
	}
	
	.business {
		.business-title {
			width: 100%;
			height: 110rpx;
			background: url(@/static/images/pic_title_gmyzl2.png) no-repeat center;
			background-size: 100%;
		}

		.business-main {
			margin-top: -20rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #DAE8FE;
            padding-bottom: 30rpx;
			.main-count {
				margin-top: 34rpx;
				margin-bottom: 19rpx;
				// height: 66rpx;
				display: flex;
				flex-wrap: wrap;

				.item {
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					.user-left {
						width: 40%;
						text-align: right;
					}

					.user-right {
						// height: 66rpx;
						min-width: 166rpx;
						min-width: 136rpx;
						padding: 20rpx 20rpx;
						background: url(@/static/images/numbg.png) no-repeat center;
						background-size: 100% 100%;
						color: #000;
						font-size: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;

						.font1 {
							margin-left: 9rpx;
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}
			}
		}
	}

	.network {
		margin-top: 19rpx;

		.network-title {
			width: 100%;
			height: 110rpx;
			background: url(@/static/images/pic_title_gmyzl3.png) no-repeat center;
			background-size: 100%;
		}

		.network-main {
			margin-top: -20rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 1rpx solid #DAE8FE;

			.main-title {
				padding: 40rpx 58rpx 0 58rpx;

				.title-font {
					padding-left: 50rpx;
					height: 40rpx;
					background: url(@/static/images/title_gmyzl2.png) no-repeat center;
					background-size: 100%;
					color: #0CB480;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.circular {
				margin-top: 43rpx;
				height: 280rpx;
				width: 100%;
				display: flex;
				padding: 0 54rpx 0 70rpx;

				.circular-item {
					width: 50%;
					height: 280rpx;
					background: linear-gradient(180deg, #FFFFFF 0%, #F5F9F7 100%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 1rpx solid #DDE9E4;
				}
			}

			.telecom {
				margin-top: 38rpx;
				height: 158rpx;
				padding: 0 55rpx;

				.telecom-count {
					height: 100%;
					background: linear-gradient(180deg, #FFFFFF 0%, #ECF0F8 100%);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 1rpx solid #ECF0F8;

					.count-top {
						margin-top: -20rpx;
						margin-left: 24rpx;
						width: 162rpx;
						height: 61rpx;
						background: #FFFFFF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						color: #000000;
						text-align: center;
					}

					.telecom-count-main {
						width: 100%;
						display: flex;

						.main-item {
							width: 50%;
							height: 78rpx;
							text-align: center;

							.font1 {
								color: #8F8E94;
								font-size: 28rpx;
							}

							.font2 {
								color: #007AFF;
								font-weight: bold;
								font-size: 36rpx;

								span {
									font-weight: 400;
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}

			.load {
				margin: 31rpx 0 51rpx 0;
				padding: 0 55rpx;
				position: relative;

				.load-main {
					.load-main-top {
						overflow: hidden;
						height: 113rpx;
						border-radius: 24rpx 24rpx 0 0;
						display: flex;

						.load-main-top-item {
							width: 50%;
							text-align: center;
							border: 1rpx solid #ECF0F8;
							background: linear-gradient(180deg, #FFFFFF 0%, #ECF0F8 100%);

							.font1 {
								margin-top: 15rpx;
								color: #8F8E94;
								font-size: 28rpx;
							}

							.font2 {
								color: #007AFF;
								font-weight: bold;
								font-size: 36rpx;

								span {
									font-weight: 400;
									font-size: 24rpx;
								}
							}
						}
					}

					.load-main-bottom {
						margin-top: 20rpx;
						border-radius: 0 0 24rpx 24rpx !important;
					}
				}

				.icon {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 102rpx;
					height: 102rpx;
					background: url(@/static/images/zhibiao_icon.png) no-repeat center;
					background-size: 100%
				}
			}
		}

	}

	.pic_fenge {
		margin: 27rpx 0 0rpx 0;
		width: 100%;
		height: 50rpx;
		background: url(@/static/images/fengexian2.png) no-repeat center;
		background-size: 100%;
	}

	.main-zx-user {
		width: 100%;
		border-radius: 16rpx;
		margin-top: 25rpx;
		height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.user-left {
			// margin-left: 182rpx;
		}

		.user-right {
			height: 66rpx;
			padding: 20rpx 35rpx;
			background: url(@/static/images/numbg.png) no-repeat center;
			background-size: 100%;
			color: #000;
			font-size: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;

			.font1 {
				margin-left: 9rpx;
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.title_gmyzl2 {
		background: url(@/static/images/title_gmyzl3.png) no-repeat center !important;
		background-size: 100% !important;
		color: #007AFF !important;
	}
</style>